<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <title>@yield('title') - 思籁商城</title>
    <link rel="stylesheet" href="{{ asset('css/normalize.css') }}">
    <link rel="stylesheet" href="{{ asset('css/default.css') }}">
    <script src="{{ asset('js/vue.min.js') }}"></script>
    <script src="{{ asset('js/axios.min.js') }}"></script>
    @yield('style')
</head>
<body>
    <div id="app">
        <div class="nav-bar-box">
            <div class="nav-bar">
                <div class="goods-category-box">
                    <div class="goods-category-label">商品分类</div>
                    <div class="goods-category">
                        @foreach(\App\GoodsCategory::getCategoryTree() as $_one)
                            <div class="goods-category-item">
                                <div class="goods-category-item-label">{{ $_one->name }}</div>
                                <div class="goods-category-two">
                                    @foreach($_one->_children as $_two)
                                        {{ $_two->name }}
                                            @foreach($_two->_children as $_three)
                                                {{ $_three->name }}
                                            @endforeach
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @yield('content')
    </div>
    @yield('js')
    <script>
        new Vue({
            el: '#app',
            methods: {
                logout: function () {
                    axios.post('{{ route('logout') }}', {
                        _token: '{{ csrf_token() }}',
                    }).then(function (res) {
                        location.reload();
                    });
                },
            },
        });
    </script>
</body>
</html>